<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>


    <link href="${request.contextPath}/plugins/buttons/css/buttons.css" rel="stylesheet" />
    <link href="${request.contextPath}/css/login.css" rel="stylesheet" />
    <style>
      .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica,serif;
        color:#fff;
        background:rgba(0,0,0,0.13);
        top:10%;
      }
      .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
      }
      .box h2{
          text-align:center;
          margin:10px 0;
          font-size:20px;
      }
      .box input{
        display:block;
        width:300px;
        margin:20px auto;
        padding:15px;
        background:rgba(0,0,0,0.2)!important;
        color:#fff;
        border:0;
      }
      .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
      }
      .box button{
        background:#742ECC;
        border:0;
        color:#fff;
        padding:10px;
        font-size:20px;
        width:330px;
        margin:20px auto;
        display:block;
        cursor:pointer;
      }
      .box button:active{
        background:#27ae60;
      }
      .box p{
        font-size:14px;
        text-align:center;
      }
      .box img{
          margin:auto;
          position: absolute;
          top: 0; left: 0; bottom: 0; right: 0;
          padding: 15px;

      }
      .box p span{
        cursor:pointer;
        color:#666;
      }
      #guest {
          padding: 10px 20px;
          width: 100%;
          background: white;
          color: rgba(0, 0, 0, 0.7);
          position: relative;
          background: rgba(255, 255, 255, 0.5);
          border: none;
          font-size: 1.2rem;
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
          cursor: pointer;
          -moz-transform: translate3d(0, -50%, 0);
          -ms-transform: translate3d(0, -50%, 0);
          -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
      }
    </style>
  </head>
  <body  >

  <div class="container demo-2">
    <div class="content">
      <div id="large-header" class="large-header">
        <canvas id="demo-canvas"></canvas>
          <div class="box">

              <h1>Dawn</h1>
              <input type="text"  id="userid" name="userid" placeholder="用户名" />
              <input type="password"  id="password" name="password" placeholder="密码"/>
              <div id="captchaDiv" style="display: none">
                  <input type="text"  id="captcha" name="captcha" maxlength="8"  placeholder="请输入验证码" />
                  <div style="position: relative;padding: 30px;margin:auto;bottom:10px;" >
                      <img src="" id="kaptchaImage" />
                  </div>
              </div>

              <a  class="button glow button-block button-border-action button-pill" id="logon">Login</a>
              <h2 id="tips"></h2>

              <!--
                            <button id="guest">I just want to have a look</button>
              -->
           </div>
      </div>
    </div>
  </div><!-- /container -->

    <input type="hidden" id="uuid" value="" />

    <!-- jQuery 2.1.4 -->
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <!-- iCheck -->
    <script src="//cdn.bootcss.com/iCheck/1.0.2/icheck.min.js" type="text/javascript"></script>
    
        <script>
        $(function () {

          var lastTime = 0;
          var vendors = ['ms', 'moz', 'webkit', 'o'];
          for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                    || window[vendors[x]+'CancelRequestAnimationFrame'];
          }

          if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function(callback, element) {
              var currTime = new Date().getTime();
              var timeToCall = Math.max(0, 16 - (currTime - lastTime));
              var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                      timeToCall);
              lastTime = currTime + timeToCall;
              return id;
            };

          if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function(id) {
              clearTimeout(id);
            };



        $("#logon").click(function(){
        
        	var userId = $("#userid").val();
        	var password = $("#password").val();
        	var uuid = $("#uuid").val();
        	var captcha = $("#captcha").val();
            var tips = $("#tips");


            if($.trim(uuid)!=""&&$.trim(captcha)==""){
                tips.html("请输入验证码!");
                return false;
            }
            if($.trim(userId)==""){
                tips.html("请输入用户名!");
                return false;
            }
            if($.trim(password)==""){
                tips.html("请输入密码!");
                return false;
            }

            tips.empty();

          	$.ajax({
        		type:'post',
        		url:'${request.contextPath}/logon',
        		data:{userId:userId,password:password,uuid:uuid,captcha:captcha},
        		success:function(data){

        			if(data=="1"){
                        tips.hide();
                        window.location.href="${request.contextPath}/index";
        			}else if(data=="3"){
                        tips.html("用户名已锁定,请等待30分钟后再试!");
                        $("#captchaDiv").show();
                        refreshCaptcha();
                    }else{
                        tips.html("用户名或密码错误!");
                        $("#captchaDiv").show();
                        refreshCaptcha();
        			}
        		}
        		
        	});  
        	
        	
        	
        	
        });


        document.querySelector('body').addEventListener('keydown', function(e) {
                if(e.which==13){
                    $("#logon").trigger("click");
                }
        }, false);


        var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;

        // Main
        initHeader();
        addListeners();

        function initHeader() {
            width = window.innerWidth;
            height = window.innerHeight;
            target = {x: 0, y: height};

            largeHeader = document.getElementById('large-header');
            largeHeader.style.height = height+'px';

            canvas = document.getElementById('demo-canvas');
            canvas.width = width;
            canvas.height = height;
            ctx = canvas.getContext('2d');

            // create particles
            circles = [];
            for(var x = 0; x < width*0.5; x++) {
              var c = new Circle();
              circles.push(c);
            }
            animate();
          }

          // Event handling
        function addListeners() {
            window.addEventListener('scroll', scrollCheck);
            window.addEventListener('resize', resize);
          }

        function scrollCheck() {
            animateHeader = document.body.scrollTop <= height;
          }

        function resize() {
            width = window.innerWidth;
            height = window.innerHeight;
            largeHeader.style.height = height+'px';
            canvas.width = width;
            canvas.height = height;
          }

        function animate() {
            if(animateHeader) {
              ctx.clearRect(0,0,width,height);
              for(var i in circles) {
                circles[i].draw();
              }
            }
            requestAnimationFrame(animate);
          }

          // Canvas manipulation
        function Circle() {
            var _this = this;

            // constructor
            (function() {
              _this.pos = {};
              init();
            })();

            function init() {
              _this.pos.x = Math.random()*width;
              _this.pos.y = height+Math.random()*100;
              _this.alpha = 0.1+Math.random()*0.3;
              _this.scale = 0.3+Math.random()*0.3;
              _this.velocity = Math.random()+0.3;
            }

            this.draw = function() {
              if(_this.alpha <= 0) {
                init();
              }
              _this.pos.y -= _this.velocity;
              _this.alpha -= 0.0005;
              ctx.beginPath();
              ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
              ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
              ctx.fill();
            };
          }

        function refreshCaptcha() {
            var uuid = generateUUID();
            $("#uuid").val(uuid);
            $("#kaptchaImage").hide().attr("src", "${request.contextPath}/captcha?uuid=" + uuid).fadeIn(10);
        }

        function generateUUID() {
            var d = new Date().getTime();
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
            });
            return uuid;
        }
 
      });






    </script>
    
    
  </body>
</html>